<template>
  <el-table
    :data="typeList"
    style="width: 100%"
    @select-all="selectAll"
    @selection-change="handleSelectionChange"
  >
    <!-- <el-table-column type="selection" width="55" /> -->
    <el-table-column label="课程类别">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="价格" v-if="off == 1">
      <template #default="scope">{{ scope.row.typePrice ?? 0 }} </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <!--   v-hasPermi="['operation:editClass:edit']" -->
      <template #default="scope">
        <EditPen @click="edit(scope.row)" class="iconBtn" />
        <!--  v-hasPermi="['operation:editClass:detele']" -->
        <Delete @click="del(scope.row)" class="iconBtn" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const emits = defineEmits([
  'saveEdit',
  'saveDelBtn',
  'sumPrice',
  'selectionChangePrice',
]);
defineProps({
  typeList: {
    type: Array,
    default: () => [],
  },
  off: {
    type: [Number],
    default: '',
  },
});
const edit = (row) => {
  emits('saveEdit', row);
};
const del = (row) => {
  emits('saveDelBtn', row);
};
const selectAll = (e) => {
  if (e.length) {
    emits('sumPrice', e);
  }
};
const handleSelectionChange = (val) => {
  emits('selectionChangePrice', val);
};
</script>
<style lang="scss" scoped>
:deep(.el-button):hover {
  border: 1px solid var(--primary-color) !important;
}
.iconBtn {
  width: 1em;
  height: 1em;
  margin-right: 8px;
  cursor: pointer;
  font-size: 20px;
  color: #000;
}
:deep(.el-input) {
  height: 40px !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
}
:deep(.el-dialog__footer) {
  justify-content: center !important;
}
</style>
